<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlelement</title>
    <style type="text/css">
        #a{
            border: 2px solid;
            width:300px;
            height: 200px;
            padding: 10px;
            position: relative;
        }
        #b{
            border: 2px solid;
            width:200px;
            height: 100px;
            padding: 10px;
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        function getposition(oe) {
            var str="";
            str+="元素标签："+oe.tagName+",id:"+oe.id+"<br>"+
                    "左边距offsetleft："+oe.offsetLeft+"上边距offsettop："+oe.offsetTop+"<br>"+
                "宽offsetwidth："+oe.offsetWidth+"高offsetheight："+oe.offsetHeight+"<br>";
            oe=oe.offsetParent;
            while (oe!==null){
                str += "元素标签：" + oe.tagName + ",id:" + oe.id + "<br>" +
                "左边距offsetleft：" + oe.offsetLeft + "上边距offsettop：" + oe.offsetTop + "<br>" +
                "宽offsetwidth：" + oe.offsetWidth + "高offsetheight：" + oe.offsetHeight + "<br>";
                oe=oe.offsetParent;
            }
            str += "元素标签：" + document.documentElement.tagName + ",id:" + document.documentElement.id + "<br>" +
                "左边距offsetleft：" + document.documentElement.offsetLeft + "上边距offsettop：" + document.documentElement.offsetTop + "<br>" +
                "宽offsetwidth：" + document.documentElement.offsetWidth + "高offsetheight：" + document.documentElement.offsetHeight + "<br>";
            document.write(str);
        }
    </script>
</head>
<body>
<div id="a"><div id="b"></div></div>
<script type="text/javascript">
    getposition(document.getElementById("b"));
</script>
</body>
</html>